<template>
  <div class="page">
    <van-nav-bar title="请假单" left-arrow @click-left="$router.go(-1)"/>
    <van-popup
    v-model="show"
    closeable
    position="center"
    :close-on-click-overlay = "false"
    >
    <div>请假说明</div>
    <div class="pop-box">
        <div class="title">1.员工休假详细制度请依据《考勤与休假管理规定》</div>
        <div class="title">2.员工请假天数的最小单位为0.5天</div>
        <div class="title">3.员工若有病假、婚假、陪产假、产假、产假（延长期）、育儿假、护理假的假期形式，请上传相关证明材料作为附件，
        具体所需材料明细为：</div>
        <div class="title">(1)产假：共158个日历日，难产（含破腹产）+15天，需提供材料：“结婚证”、“诊断证明”</div>
        <div class="title">(2)陪产假：共15个日历日，需提供材料：“结婚证”、“婴儿出生证明” </div>
        <div class="title">(2)婚假：共10个日历日，需提供材料：“结婚证”</div>
    </div>
    </van-popup>
    <div class="head-box" @click="show=true">《请假说明》<van-icon color="#1989fa" name="question" /></div>
    <van-form @submit="onSubmit">
        <van-cell title="请假类型" is-link value="请选择（必填）" />
        <van-cell title="开始时间" is-link value="请选择（必填）" @click="timeModal = true"/>
        <van-cell title="结束时间" is-link value="请选择（必填）" @click="timeModal = true"/>
        <van-cell title="请假时长" />
        <div class="reson">
            <span>请假事由</span>
            <van-field
            v-model="reason"
            rows="2"
            autosize
            type="textarea"
            maxlength="50"
            show-word-limit
            />
        </div>
        <div class="reson">
            <span>附件</span>
            <van-field name="uploader">
            <template #input>
                <van-uploader v-model="uploader" />
            </template>
            </van-field>
        </div>
        <van-row type="flex" justify="space-around" style="marginTop:25px">
            <van-col span="10">
                <van-button round block type="warning" native-type="submit">暂存</van-button>
            </van-col>
                <van-col span="10">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </van-col>
        </van-row>
    </van-form>
    <time-picker-modal :timeModal="timeModal" :titleDate="titleDate" @cancel="timeModal = false" @dateModalConfrim="dateModalConfrim"/>
    <van-number-keyboard safe-area-inset-bottom />
  </div>
</template>
<script>
import timePickerModal from '@/components/datePickerModal/timePickerModal.vue'
import { mapState } from 'vuex'
export default {
  components: { timePickerModal },
  name: 'LeaveForm',
  data () {
    return {
      show: true,
      reason: '',
      uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
      timeModal: false,
      titleDate: new Date().toLocaleDateString()
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo
    })
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    },
    dateModalConfrim (value) {
      console.log('选中的时间', value)
      this.timeModal = false
    }
  }
}
</script>
<style lang="less" scoped>
.van-popup{
    height: 300px;
    width: 70%;
    padding: .875rem;
    text-align: left;
}
.pop-box{
    height: 250px;
    overflow-y: scroll;
}
.title{
    margin-top: .625rem;
    font-size: .8125rem;
    line-height:1.5625rem;
}
.head-box{
    text-align: left;
    padding: .625rem .875rem 0 .875rem;
    color: #888;
}
.reson{
    text-align: left;
    padding: .625rem .875rem 0 .875rem;
    margin-top:.875rem;
    background-color: #fff;
}
.van-cell{
    margin-top:.875rem;
    background-color: #fff;
}
</style>
